<template>
	<view class="page-wraper">
		<view class="header-view-box">
			<customNav bgColor="#4E6ECC" :backIcon="true" backIconColor="white"></customNav>
			<addressSearch ref="setAddres" @addressBtn='addressBtn' @searchBtn='searchBtn' @inputPhone='inputPhone'
				:addALLAddress="true">
			</addressSearch>
			<view style="background: #4E6ECC;padding-top: 10rpx;">
				<view class="car-list-box">
					<view class="popup-box-class">
						<view class="car-select-box">
							<view :class="temp==0?'car-select-item-selected':'car-select-item'" @click="selectClick(0)">
								<text
									:class="temp==0?'car-select-item-text-selected':'car-select-item-text'">{{sortSelected}}</text>
								<image class="car-select-item-image" src="@/static/downArrow-selected.png"
									v-if="temp==0">
								</image>
								<image class="car-select-item-image" src="@/static/downArrorw-black.png" v-else />
							</view>
							<view :class="temp==1?'car-select-item-selected':'car-select-item'" @click="selectClick(1)">
								<text
									:class="temp==1?'car-select-item-text-selected':'car-select-item-text'">{{carBrandSelected}}</text>
								<image class="car-select-item-image" src="@/static/downArrow-selected.png"
									v-if="temp==1">
								</image>
								<image class="car-select-item-image" src="@/static/downArrorw-black.png" v-else />
							</view>
							<view :class="temp==2?'car-select-item-selected':'car-select-item'" @click="selectClick(2)">
								<text
									:class="temp==2?'car-select-item-text-selected':'car-select-item-text'">{{priceSelected}}</text>
								<image class="car-select-item-image" src="@/static/downArrow-selected.png"
									v-if="temp==2">
								</image>
								<image class="car-select-item-image" src="@/static/downArrorw-black.png" v-else />
							</view>
							<view :class="temp==3?'car-select-item-selected':'car-select-item'" @click="selectClick(3)">
								<text
									:class="temp==3?'car-select-item-text-selected':'car-select-item-text'">{{ageSelected}}</text>
								<image class="car-select-item-image" src="@/static/downArrow-selected.png"
									v-if="temp==3">
								</image>
								<image class="car-select-item-image" src="@/static/downArrorw-black.png" v-else />
							</view>
							<view :class="temp==4?'car-select-item-selected':'car-select-item'" @click="selectClick(4)">
								<text
									:class="temp==4?'car-select-item-text-selected':'car-select-item-text'">{{moreSelected}}</text>
								<image class="car-select-item-image" src="@/static/downArrow-selected.png"
									v-if="temp==4">
								</image>
								<image class="car-select-item-image" src="@/static/downArrorw-black.png" v-else />
							</view>
						</view>
						<!-- <view class="scroll_box" v-if="temp==1?dataList.length>0?true:false:false">
							<swiper :circular="false" vertical="false" display-multiple-items="4"
								:autoplay="false" :vertical="false" previous-margin="0rpx"
								next-margin="50rpx">
								<swiper-item v-for="(indexItem,index) in dataList" :key="index">
									<slopeItem :data="indexItem" @tap_item='tap_item' :carName="carName">
									</slopeItem>
								</swiper-item>
							</swiper>
						</view> -->
						<view class="popup-view-box" v-if="temp==-1?temp==1?false:false:true">
							<view class="popup-view-box-3">
								<view class="popup-view-box-1">
									<sortCar :data="sortDataList" :name="sortName" v-if="temp==0"
										@sortItemtap='sortItemtap' />
									<!-- ?dataList.length>0?true:false:false -->
									<view class="scroll_box" v-if="temp==1?dataList.length>0?true:false:false">
										<swiper :circular="false" vertical="false" display-multiple-items="4"
											:autoplay="false" :vertical="false" previous-margin="0rpx"
											next-margin="10rpx">
											<swiper-item v-for="(indexItem,index) in dataList" :key="index">
												<slopeItem :data="indexItem" @tap_item='tap_item' :carName="carName">
												</slopeItem>
											</swiper-item>
										</swiper>
									</view>

									<priceSelected v-if="temp==2" @btn_confirmPrice='btn_confirmPrice'
										:selectedName='carPriceSelected' :priceDataList='priceDataList' />
									<ageSelected v-if="temp==3" @btn_confirmAge='btn_confirmAge'
										:selectedName='carAgeSelected' />

								</view>
							</view>
							<view class="popup-view-box-2" @click="popupClick()" />
						</view>

					</view>

					<view class="selected-header-box" v-if="isSelectedShow">
						<scroll-view :scroll-x="true" class="scroll-view-class">
							<block v-for="(indexItem,index) in selectedDataList" :key="index">
								<view class="header_item_box" @click="moveClick(indexItem,index)">
									<text class="header-selected-view-class">{{indexItem.name}}</text>
									<image src="@/static/x.png" class="header-item-image">
									</image>
								</view>
							</block>
						</scroll-view>
						<!-- <view class="chongzhi-view-class">重置</view> -->
					</view>

				</view>
				<view id="id_dingwei"></view>
			</view>

		</view>

		<view :style="{'height':headerHeight + 'px'}" v-if="isShowList"></view>

		<view v-if="isShowList">
			<scroll-view scroll-y="true" :style="'height:' + scroll_height+';'" :scroll-top="scrollTop"
				refresher-enabled :refresher-triggered="triggered" @refresherrefresh="onRefresh" @scrolltolower="lower">
				<view v-for="(itemSecondhandCar,index) in waterfall.list" :key="index">
					<view class="secondhand-car-list-item-box">
						<view class="secondhand-car-list-item-image-right">
							<image :src="itemSecondhandCar.cover_url"
								v-if="itemSecondhandCar.cover_url" @click="onClick(itemSecondhandCar,index)" mode="widthFix"></image>
							<image src="@/static/hengxiang_no_image.png" v-else
								@click="onClick(itemSecondhandCar,index)"  mode="widthFix"></image>
						</view>
						<view class="secondhand-car-list-item-right">
							<view class="waterfall-item-title" v-if="itemSecondhandCar.model_has_one"
								@click="onClick(itemSecondhandCar,index)">
								{{itemSecondhandCar.model_has_one.name}}
							</view>
							<view class="item-content-box" @click="onClick(itemSecondhandCar,index)">
								<view class="item-content-text" v-if="itemSecondhandCar.registration_time">
									{{itemSecondhandCar.registration_time.split('-')[0]}}-{{itemSecondhandCar.registration_time.split('-')[1]}}
								</view>
								<view class="shu-line"  v-if="itemSecondhandCar.registration_time"></view>
								<view class="item-content-text" v-if="itemSecondhandCar.standard_has_one">
									{{itemSecondhandCar.standard_has_one.name}}
								</view>
								<view class="shu-line" v-if="itemSecondhandCar.standard_has_one"></view>
								<view class="item-content-text">{{itemSecondhandCar.mileage}}</view>
								<view class="shu-line" v-if="itemSecondhandCar.province_has_one"></view>
								<view class="item-content-text" v-if="itemSecondhandCar.province_has_one">
									{{itemSecondhandCar.province_has_one.name}}
								</view>
							</view>
							<view class="item-content-box-cars-label" @click="onClick(itemSecondhandCar,index)">
								<!-- 收藏 备注 等相关关键字段 -->
								<view v-for="(itemCars_label,indexCars_label) in itemSecondhandCar.cars_label"
									:key="indexCars_label">
									<view class="secondhand-car-list-item-fuel-save">{{itemCars_label}}</view>
								</view>
							</view>
							<view class="item-price-box">
								<view class="item-content-box" style="flex: 1;" @click="onClick(itemSecondhandCar,index)">
									<view class="item-text-price">{{itemSecondhandCar.price.split('万')[0]}}</view>
									<view class="item-text-wan">万</view>
									<!-- <view class="secondhand-car-list-item-shoufu-price">首付：23.00万</view> -->
								</view>
								<view style="font-size: 22rpx;font-family: Source Han Sans SC;font-weight: 400;color: #AAAAAA;margin-right: 20rpx;">{{itemSecondhandCar.create_time}}</view>
								<image class="secondhand-car-list-item-save-image" src="@/static/save-select.png"
									v-if="itemSecondhandCar.is_collect==1"
									@click="onClickSave(itemSecondhandCar,index)"></image>
								<image class="secondhand-car-list-item-save-image" src="@/static/save-hui.png"
									@click="onClickSave(itemSecondhandCar,index)" v-else>
								</image>
								<!-- <view class="item-content-text">{{itemSecondhandCar.create_time}}</view> -->
							</view>
						</view>
					</view>
				</view>
				<view v-if="waterfall.status == 'await'">
					<view class="load-txt">上拉加载更多</view>
				</view>
				<view v-else-if="waterfall.status == 'loading'">
					<view class="load-txt">加载中...</view>
				</view>
				<view v-else-if="waterfall.status == 'finish'">
					<view class="load-txt">没有更多了</view>
				</view>
				<view v-else-if="waterfall.status == 'fail'">
					<image class="load-icon" src="@/static/NoDataBac.png"></image>
					<view class="load-txt">出错了，请刷新重试</view>
				</view>
				<view v-else-if="waterfall.status == 'empty'">
					<image class="load-icon" src="@/static/NoDataBac.png"></image>
					<view class="load-txt">暂无数据</view>
				</view>
				<view v-else>
					<view class="load-txt-yincang">没有数据了</view>
				</view>

			</scroll-view>
		</view>
		<!-- <view class="no-data-class" v-if="isNoData">----暂无数据----</view> -->
		<image src="@/static/send-image.png" class="send-view-box " @click="sendBtnClick()"></image>
	</view>
</template>

<script>
	import customNav from "@/components/custom-nav/custom-nav.vue";
	import cssArcBackground from "@/components/cssArcBackground/cssArcBackground.vue";
	import addressSearch from "@/components/addressSearch/addressSearch.vue";
	import helangWaterfallList from "@/secondhandCar/Waterfall/waterfall-list.vue"
	import slopeItem from "@/secondhandCar/slopeItem/slopeItem.vue";
	import sortCar from "@/secondhandCar/sortCar/sortCar.vue";
	import priceSelected from "@/secondhandCar/priceselected/priceselected.vue";
	import ageSelected from "@/secondhandCar/ageSelected/ageSelected.vue";
	import {
		getUsedCarList,
		getSecondhandCarList,
		getPriceWhere,
		getUsedCarDetails,
		collectionUpdate
	} from "@/api/secondhandCar.js";
	import {
		getUsedVehicleSeriesSecondary
	} from "@/api/brand.js";
	export default {
		components: {
			customNav,
			addressSearch,
			cssArcBackground,
			slopeItem,
			sortCar,
			priceSelected,
			ageSelected,
			helangWaterfallList
		},
		data() {
			return {
				/**
				 * 车源列表收藏数据相关
				 * */
				collectionUpdatePost: {
					"state": "2", //1：新车 2：二手车
					"users_id": "", //用户id
					"cars_id": "", //车源id
					shop_users_id: ''
				},


				/**
				 * 车源列表数据请求参数 start
				 * */
				postData: {
					page: 1, //第几页数据
					page_num: 10, // 行数 必传 其他都是非必须
					order: 0, // 排序0：默认排序 1：最新上架 2：价格最低 3：价格最高 4：里程最少 5：车龄最短
					brand_id: '', //品牌id
					series_id: '', //二级车系id
					start_price: '', // 价格起 
					end_price: '', // 价格止
					start_car_age: '', // //车龄起  
					end_car_age: '', // 车龄止
					where_city_id: '', // 车辆所在地市id
					registration_city_id: '', // 上牌地市id
					structure_id: '', // 车身结构id
					standard_id: '', // 排放标准id
					fuel_type_id: '', // 燃油类型id
					users_id: '', //用户id
					search: '' //搜索框输入的内容
				},
				/**
				 * 车源列表数据请求参数 end
				 * */

				sortSelected: '排序',
				carBrandSelected: '品牌',
				carBrandID: '',
				priceSelected: '价格',
				ageSelected: '车龄',


				moreSelected: '更多',
				fuel_type_name: '',


				sortName: '默认排序',
				carPriceSelected: '不限价格',
				carAgeSelected: '不限车龄',
				temp: -1,
				carName: '',
				headerHeight: '',
				isShowList: true,
				sortDataList: [{
						id: '0',
						title: '标题',
						name: '默认排序'
					},
					{
						id: '1',
						title: '标题',
						name: '最新上架'
					},
					{
						id: '2',
						title: '标题',
						name: '价格最低'
					},
					{
						id: '3',
						title: '标题',
						name: '价格最高'
					},
					{
						id: '4',
						title: '标题',
						name: '里程最少'
					},
					{
						id: '5',
						title: '标题',
						name: '车龄最短'
					},
				],
				carListData: [], //cheyuan liebiao shuju 
				dataList: [],
				selectedDataList: [],
				isSelectedShow: false,
				carBrandIsShow: false, //是否显示swiper 车系 popup 只有在点击热门品牌进来的时候才展示
				priceDataList: [],


				//上拉加载下拉刷新相关
				last_page: 0, //总页数
				isShowMore: false,
				isEnd: false,
				triggered: false,
				isfreshing: false,
				isShowList: true,
				isNoData: false,
				scroll_height: '',
				scrollTop: 0,



				// 异步请求相关
				ajax: {
					// 是否可以加载
					load: true,
					// 数据列表
					dataList: []
				},

				// 瀑布流组件相关
				waterfall: {
					status: "",
					reset: false,
					list: []
				},

				isfirst: true,
				isRefresher: true,

				users_id: '',
				endName: ''

			}
		},
		mounted() {
			this.getheaderHeight()
		},
		onShow() {
			try {
				this.getheaderHeight()
				this.$utils.stopPage() //禁止页面本身的滑动
				this.$refs.setAddres.setAddres()
			} catch (e) {
				//TODO handle the exception
			}
		},
		/**
		 * onHide()触发的场景：
		 *导航页1>>导航页2，会触发导航页1  onHide（）
		 *
		 *导航页>>子页面，会触发导航页  onHide（）
		 *
		 *子页面1>>子页面2，会触发子页面1  onHide（）
		 **/
		onHide() {
			try{
				this.$utils.movePage()
			}catch(e){
				//TODO handle the exception
			}
		},
		/**
		 *onUnload()触发的场景：
		 *从子页面2返回到子页面1，会触发子页面2的onUnload()
		 *
		 *从子页面返回到导航页，会触发子页面的onUnload()
		 */
		onUnload() {
			try{
				this.$utils.movePage()
			}catch(e){
				//TODO handle the exception
			}
		},
		onReady() {
			this.getheaderHeight()
			const query = uni.createSelectorQuery().in(this);
			query.select('#id_dingwei').boundingClientRect(data => {
				this.$utils.log("得到布局位置信息" + JSON.stringify(data));
				var that = this
				that.isShowList = false
				that.$nextTick(() => {
					that.scroll_height = uni.getSystemInfoSync().windowHeight - data.top + 'px';
					that.top_height = data.top + 20 + 'px'
					that.isShowList = true
					this.$utils.log("topgaodu   " + that.top_height);
					this.$utils.log("that.scroll_height  " + that.scroll_height);
				})

			}).exec();
		},
		onLoad(option) {
			const value = uni.getStorageSync('login')
			if (value) {
				this.users_id = value.id
				this.collectionUpdatePost.users_id = value.id
				this.postData.users_id = value.id
			}
			const location = uni.getStorageSync('address')
			this.$utils.log("dayiin huoqudao de xinagqing location  " + JSON.stringify(location))
			if (location) {
				this.endName = location.name
				this.postData.where_city_id = location.id
				this.postData.where_city_name = location.name
			}

			this.$utils.log("打印二手车列表页面option   " + JSON.stringify(option))
			this.temp = -1
			//点击买二手不会有数据传过来
			//选择热门品牌
			if (option.carBrandSelected) {
				this.carBrandSelected = option.carBrandSelected
				this.carBrandIsShow = true
				this.carBrandID = option.id
				this.postData.brand_id = this.carBrandID
				this.$utils.log("打印二手车列表页面option   " + JSON.stringify(option))
				var that = this
				//点击热门品牌进来获取品牌下面车系
				getUsedVehicleSeriesSecondary(this.carBrandID).then(res => {
					that.$utils.log("点击热门品牌进来获取到的车系列表数据  " + JSON.stringify(res))
					if (res.code == 0) {
						that.dataList = res.data
						if (that.dataList.length <= 0) {
							that.temp = -1
							that.postData.brand_id = that.carBrandID
							that.postData.page = 1;
							that.ajax.load = true;
							that.isRefresher = false;
							that.getPageSecondhandCarList()
						} else {
							that.$utils.log("打印返回热门品牌 返回的车系数据  " + that.dataList.length)
							if (that.dataList.length == 1) {
								that.dataList.push({})
								that.dataList.push({})
								that.dataList.push({})
							} else if (that.dataList.length == 2) {
								that.dataList.push({})
								that.dataList.push({})
							} else if (that.dataList.length == 3) {
								that.dataList.push({})
							}
							that.temp = 1
						}
					} else {
						that.postData.brand_id = that.carBrandID
						that.getPageSecondhandCarList()
					}
				})
			} else {
				this.carBrandIsShow = false
			}
			//选择金额
			if (option.priceSelected) {
				this.priceSelected = option.priceSelected
				this.carPriceSelected = this.priceSelected
				this.postData.start_price = option.start_price
				if (option.end_price != 0) {
					this.postData.end_price = option.end_price
				} else {
					this.postData.end_price = ''
				}

			}

			//选择燃油
			if (option.fuel_type_id) {
				this.fuel_type_name = option.fuel_type_name
				this.postData.fuel_type_id = option.fuel_type_id
			}
			// if (option.moreSelected !== null && option.moreSelected !== '' && option.moreSelected !== undefined) {
			// 	this.moreSelected = option.moreSelected
			// }
			if (this.selectedDataList.length <= 0) {
				this.isSelectedShow = false
			} else {
				this.isSelectedShow = true
			}

			var that = this
			getPriceWhere().then(res => {
				that.isShowList = false
				that.$nextTick(() => {
					that.priceDataList = res.data
					var obj = {
						"id": "1",
						"name": "不限价格",
						"start": 0,
						"end": 0
					}
					that.priceDataList.unshift(obj)
					that.isShowList = true
					that.$forceUpdate()
				})
			})
			// if (!option.carBrandSelected) {

			// }
			// if (!this.carBrandIsShow) {
			// 	this.getPageSecondhandCarList()
			// }
			this.getPageSecondhandCarList()
			this.$utils.log("=======onLoad==========  " + JSON.stringify(this.postData))

		},
		methods: {
			//第一次进入请求的方法

			//二手车列表中的收藏与取消收藏
			onClickSave(itemSecondhandCar, index) {
				this.$utils.log("进入收藏方法  " + JSON.stringify(itemSecondhandCar))
				if (this.collectionUpdatePost.users_id) {
					this.collectionUpdatePost.cars_id = itemSecondhandCar.id
						this.collectionUpdatePost.shop_users_id = itemSecondhandCar.users_id
					if (itemSecondhandCar.is_collect == 0) {
						collectionUpdate(this.collectionUpdatePost).then(res => {
							if (res.code == 0) {
								this.waterfall.list[index].is_collect = 1
							}
							this.$utils.log("打印收藏方法返回数据  0 " + JSON.stringify(res))
						})
					} else {
						collectionUpdate(this.collectionUpdatePost).then(res => {
							this.$utils.log("打印收藏方法返回数据  1  " + JSON.stringify(res))
							if (res.code == 0) {
								this.waterfall.list[index].is_collect = 0
							}
						})
					}
				} else {
					uni.showToast({
						title: '收藏需要登录，请先登录',
						icon: 'none',
						duration: 2000
					})
				}

			},
			//下拉刷新
			onRefresh() {
				// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
				setTimeout(() => {
					this.postData.page = 1;
					this.ajax.load = true;
					this.isRefresher = true;
					this.getPageSecondhandCarList()
				}, 800);
			},
			//二手车列表搜索框点击搜索按钮
			searchBtn(content) {
				this.postData.search = content
				this.postData.page = 1;
				this.ajax.load = true;
				this.isRefresher = false;
				this.getPageSecondhandCarList()
			},
			//搜索框内容删除完成时候调用
			inputPhone() {
				this.postData.search = ''
				this.postData.page = 1;
				this.ajax.load = true;
				this.isRefresher = false;
				this.getPageSecondhandCarList()
			},
			// 上拉加载
			lower() {
				this.postData.page = this.postData.page + 1
				if (this.waterfall.status == '' || this.waterfall.status == 'finish' || this.waterfall.status ==
					'loading') {
					uni.showToast({
						title: '没有数据了',
						icon: 'none'
					})
					this.$utils.log("没有数据了")
					return
				}
				this.getPageSecondhandCarList()
			},

			// 瀑布流组件点击事件
			onClick(item, index) {
				this.$utils.log("打印点击item返回的数据" + JSON.stringify(item))
				var that = this
				getUsedCarDetails(item.id, this.users_id, this.endName).then(res => {
					if (res.code == 0) {
						that.dataObject = res.data
						uni.navigateTo({
							url: '/secondhandCar/secondhandCarDetails/secondhandCarDetails?carId=' +
								item.id + '&isContent=' + true,
							events: {
								// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
								acceptDataFromOpenedPage: function(data) {
									that.$utils.log("打印返回数据 acceptDataFromOpenedPage  " + JSON
										.stringify(data))
								},
								someEvent: function(data) {
									that.$utils.log("打印返回数据 someEvent   " + JSON.stringify(data))
								}
							},
							success: function(res) {
								that.$utils.log("打印发送数据 success   " + JSON.stringify(that
									.dataObject))
								// 通过eventChannel向被打开页面传送数据
								res.eventChannel.emit('acceptDataFromOpenerPage', that.dataObject)
							},
							fail: function(error) {
								that.$utils.log("打印发送数据 fail   " + JSON.stringify(error))
							}
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},

			//获取车源列表数据
			getPageSecondhandCarList() {
				this.$utils.log("打印请求的参数   " + JSON.stringify(this.postData))
				if (!this.ajax.load) {
					return;
				}

				if (!this.isfirst & this.postData.page == 1 & this.isRefresher) {
					this.triggered = true
				}
				this.isfirst = false
				this.ajax.load = false;
				// 设置状态为加载中
				this.waterfall.status = 'loading';
				var that = this
				getSecondhandCarList(that.postData).then(res => {
						that.$utils.log("打印服务端返回的车源列表数据" + JSON.stringify(res))
						if (res.code == 0) {
							// that.isShowList = false
							that.$nextTick(() => {
								// 第一页数据执行以下代码
								if (that.postData.page == 1 && that.triggered) {
									//关闭下拉
									that.triggered = false
								}
								// 第一页没有数据时处理
								if (res.data.data.length < 1 & that.postData.page == 1) {
									// 设置组件为 暂无数据 状态
									that.waterfall.status = 'empty';
									// 因没有数据 直接[]赋值给瀑布流 list 属性
									that.waterfall.list = []
									return;
								}
								// 数据无效时处理
								if (!res.data.data || res.data.data.length < 1) {
									// 设置组件为 加载结束 状态
									that.waterfall.status = 'finish';
									setTimeout(() => {
										that.waterfall.status = ''
									}, 3000)
									return;
								}
								// 将数据赋值给瀑布流 list 属性
								if (that.postData.page == 1) {
									that.waterfall.list = res.data.data;
								} else {
									that.waterfall.list = [...that.waterfall.list, ...res.data.data];
								}

								// 设置组件为 加载成功 状态，此时瀑布流组件开始计算当前数据的布局
								if (that.postData.page < res.data.last_page) {
									that.waterfall.status = 'await';
									that.ajax.load = true
								} else {
									that.waterfall.status = 'finish';
									setTimeout(() => {
										that.waterfall.status = ''
									}, 3000)
									return;
								}


								// 缓存当前数据给其他需要该数据的功能使用
								if (that.postData.page == 1) {
									that.ajax.dataList = res.data.data;
								} else {
									that.ajax.dataList = [...that.ajax.dataList, ...res.data.data];
								}
							})
						} else {
							// 设置组件为 暂无数据 状态
							that.waterfall.status = 'empty';
							// 因没有数据 直接[]赋值给瀑布流 list 属性
							that.waterfall.list = []
						}

					},
					error => {
						this.$utils.log("打印进入  error  " + JSON.stringify(error))
						// 设置组件为 暂无数据 状态
						that.waterfall.status = 'empty';
						// 因没有数据 直接[]赋值给瀑布流 list 属性
						that.waterfall.list = []
					})
			},
			//获取高度
			getheaderHeight() {
				uni.createSelectorQuery().in(this).select('.header-view-box').boundingClientRect(data => {
					// this.$utils.log("打印获取固定在顶部的view的高度 =====  " + JSON.stringify(data))
					this.headerHeight = data.height
				}).exec()
			},
			//数据回掉钩子
			backData(object) {
				if(object.isRefresh){
					this.postData.page = 1;
					this.ajax.load = true;
					this.isRefresher = false;
					this.getPageSecondhandCarList()
				}
				if (object.secondhandCarListId == 1) {
					if (object.brand_id) {
						this.postData.brand_id = object.brand_id
						this.postData.series_id = ''
					}
					if (object.id) {
						this.postData.brand_id = ''
						this.postData.series_id = object.id
					}
					if (!object.id & !object.brand_id) {
						this.postData.brand_id = ''
						this.postData.series_id = ''
					}

					if (object.name) {
						this.carBrandSelected = object.name
					} else if (object.brand_name) {
						this.carBrandSelected = object.brand_name
					} else {
						this.carBrandSelected = '品牌'
					}

					// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
					setTimeout(() => {
						this.postData.page = 1;
						this.ajax.load = true;
						this.isRefresher = false;
						this.getPageSecondhandCarList()
					}, 800);
				}
				if (object.key == 'more') {
					this.postData.structure_id = ''
					// this.postData.where_city_id = ''
					this.postData.registration_city_id = ''
					this.postData.standard_id = ''
					this.postData.fuel_type_id = ''
					this.$utils.log("数据回掉钩子 返回的数据  " + JSON.stringify(object))
					this.selectedDataList = object.selectedDataList
					this.$utils.log(JSON.stringify(this.selectedDataList))
					if (this.selectedDataList.length <= 0) {
						this.isSelectedShow = false
					} else {
						this.isSelectedShow = true
					}
					for (var i = 0; i < this.selectedDataList.length; i++) {
						if (this.selectedDataList[i].key == '1') {
							this.postData.structure_id = this.selectedDataList[i].id
							continue
						}
						if (this.selectedDataList[i].key == '2') {
							this.postData.where_city_id = this.selectedDataList[i].id
							continue
						}
						if (this.selectedDataList[i].key == '3') {
							this.postData.registration_city_id = this.selectedDataList[i].id
							continue
						}
						if (this.selectedDataList[i].key == '4') {
							// this.postData.structure_id = this.selectedDataList[i].id
							continue
						}
						if (this.selectedDataList[i].key == '5') {
							this.postData.standard_id = this.selectedDataList[i].id
							continue
						}
						if (this.selectedDataList[i].key == '6') {
							this.postData.fuel_type_id = this.selectedDataList[i].id
							continue
						}
					}
					// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
					setTimeout(() => {
						this.postData.page = 1;
						this.ajax.load = true;
						this.isRefresher = false;
						this.getPageSecondhandCarList()
					}, 800);
				}
			},
			//点击更多 返回的数据列表的删除方法
			moveClick(item, index) {
				this.selectedDataList.splice(index, 1)

				if (item.key == '1')
					this.postData.structure_id = ''
				if (item.key == '2')
					// this.postData.where_city_id = ''
					if (item.key == '3')
						this.postData.registration_city_id = ''
				// if(item.key=='4'){
				// this.postData.structure_id = this.selectedDataList[i].id
				if (item.key == '5')
					this.postData.standard_id = ''
				if (item.key == '6')
					this.postData.fuel_type_id = ''

				this.$utils.log(JSON.stringify(this.selectedDataList))
				if (this.selectedDataList.length <= 0) {
					this.isSelectedShow = false
					this.isShowList = false
					this.headerHeight = 0

					this.$nextTick(() => {
						this.isShowList = true;
						this.getheaderHeight()
					})
					this.$forceUpdate()
				} else {
					this.isSelectedShow = true
				}
				// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
				this.postData.page = 1;
				this.ajax.load = true;
				this.isRefresher = false;
				this.getPageSecondhandCarList()
			},
			//点击获取位置的方法
			addressBtn(locationBoj) {
				this.$utils.log("点击获取位置 secondhandCarList " + JSON.stringify(locationBoj))
				this.postData.where_city_id = locationBoj.id
				// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
				this.postData.page = 1;
				this.ajax.load = true;
				this.isRefresher = false;
				this.getPageSecondhandCarList()
			},
			//点击选择筛选 条件 进行弹窗或者跳转
			selectClick(inta) {
				if (inta == 1) {
					if (this.carBrandIsShow) {
						if (this.temp == inta) {
							this.temp = -1
							this.postData.page = 1;
							this.ajax.load = true;
							this.isRefresher = false;
							this.getPageSecondhandCarList()
						} else {
							this.temp = inta
						}
					} else {
						uni.navigateTo({
							url: '/pages/home/allBrand/allBrand?secondhand_page_type=true'
						})
						this.temp = -1
					}
				} else if (inta == 4) {
					this.$utils.log("点击头部" + this.temp)
					if (inta == 4) {
						// 传递数组到更多页面

						// #ifdef H5
						let items = encodeURIComponent(JSON.stringify(this.selectedDataList));
						let postContent = encodeURIComponent(JSON.stringify(this.postData));
						// #endif
						// #ifdef MP-WEIXIN
						let items = JSON.stringify(this.selectedDataList);
						let postContent = JSON.stringify(this.postData);
						// #endif
						// brand_id: '', //品牌id
						// series_id: '', //二级车系id
						// start_price: '', // 价格起 
						// end_price: '', // 价格止
						// start_car_age: '', // //车龄起  
						// end_car_age: '', // 车龄止
						uni.navigateTo({
							url: '/secondhandCar/secondhandCarList/moreConditionPage/moreConditionPage?selectedData=' +
								items + '&postData=' + postContent
						})
					}
				} else {
					if (this.temp == inta) {
						this.temp = -1
					} else {
						this.temp = inta

					}
				}

			},
			//点击热门品牌进来可以进行选择的车系
			tap_item(item) {
				this.$utils.log("点击了swiper中的item项返回数据 " + JSON.stringify(item))
				this.carName = item.name
				this.carBrandSelected = item.name
				this.temp = -1
				this.postData.series_id = item.id
				// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
				this.postData.page = 1;
				this.ajax.load = true;
				this.isRefresher = false;
				this.getPageSecondhandCarList()
			},
			//点击数据列表的item项
			tapItem(item) {
				this.$utils.log("打印点击item返回的数据" + JSON.stringify(item))
				uni.navigateTo({
					url: '/secondhandCar/secondhandCarDetails/secondhandCarDetails?carId=' + item.id
				})
			},

			//点击排序
			sortItemtap(item) {
				this.$utils.log(JSON.stringify(item.id))
				this.sortName = item.name
				this.postData.order = item.id

				if (this.postData.order != item.id) {

				}

				if (this.sortName == '默认排序') {
					this.sortSelected = '排序'
				} else {
					this.sortSelected = this.sortName
				}
				this.temp = -1
				// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
				this.postData.page = 1;
				this.ajax.load = true;
				this.isRefresher = false;
				this.getPageSecondhandCarList()
			},
			//选择价格
			btn_confirmPrice(start, end, name) {
				this.$utils.log("价格中打印" + "  name  " + name)
				this.$utils.log("价格中打印 start " + start + "  end  " + end)
				this.postData.start_price = start
				this.postData.end_price = end
				if (name == '不限价格') {
					this.priceSelected = '价格'
				} else {
					this.priceSelected = name
				}
				this.carPriceSelected = name
				this.temp = -1
				// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
				this.postData.page = 1;
				this.ajax.load = true;
				this.isRefresher = false;
				this.getPageSecondhandCarList()
			},
			//选择车龄
			btn_confirmAge(start, end, name) {
				this.$utils.log("车龄中打印" + "  name  " + name)
				this.postData.start_car_age = start
				this.postData.end_car_age = end
				if (name == '不限车龄') {
					this.ageSelected = '车龄'

				} else {
					this.ageSelected = name
				}
				this.carAgeSelected = name
				this.temp = -1
				// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
				this.postData.page = 1;
				this.ajax.load = true;
				this.isRefresher = false;
				this.getPageSecondhandCarList()
			},
			popupClick() {
				if (this.temp == 1 && this.carBrandIsShow) {
					this.postData.brand_id = this.carBrandID
					this.postData.page = 1;
					this.ajax.load = true;
					this.isRefresher = false;
					this.getPageSecondhandCarList()
				}
				this.temp = -1
				this.$utils.log("点击了popup")

			},
			sendBtnClick() {
				this.temp = -1
				uni.navigateTo({
					url: '/secondhandCar/sendCarSource/sendCarSource'
				})
			}

		}
	}
</script>

<style>
	.page-wraper {
		display: flex;
		flex-direction: column;
		width: 100%;
		background-color: #fff;
	}

	.header-view-box {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 11;
	}

	.car-list-box {
		background-color: white;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}

	.car-select-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 18rpx;
	}

	.car-select-item {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 5rpx;
	}

	.car-select-item-selected {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background-color: #EDF1FE;
		border-radius: 30rpx;
		padding: 5rpx;
	}

	.car-select-item-text-selected {
		color: #2755F3;
		font-size: 30rpx;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: normal !important;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		font-family: Source Han Sans CN;
		font-weight: 400;
	}

	.car-select-item-text {
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #000026;
		font-size: 30rpx;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: normal !important;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.car-select-item-image {
		width: 20rpx;
		height: 12rpx;
		margin-left: 10rpx;
	}

	.scroll_box {
		width: 100%;
		height: 150rpx;
		margin-bottom: 20rpx;
	}

	.popup-box-class {
		/* 父元素设置相对定位 */
		position: relative;
	}

	.popup-view-box {
		/* 设置绝对定位 */
		position: absolute;
		/* 距离父元素上边缘 50px */
		top: 90rpx;
		z-index: 1;

		border-radius: 0rpx 0rpx 20rpx 20rpx;
		width: 100%;
		height: 3000rpx;
	}

	.popup-view-box-1 {
		margin-top: -15rpx;
		padding-bottom: 20rpx;
		background-color: white;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		width: 100%;
	}

	.popup-view-box-2 {
		width: 100%;
		height: 200vh;
		background-color: #00000099;
	}

	.popup-view-box-3 {
		width: 100%;
		height: auto;
		background-color: #00000099;
	}

	.selected-header-box {
		height: auto;
		white-space: nowrap;
		position: relative;
		background-color: white;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.scroll-view-class {
		white-space: nowrap; // 滚动必须加的属性
		width: 100%;
		height: auto;
	}

	.header_item_box {
		display: inline-flex; // item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可
		flex-direction: row;
		align-items: center;
		background-color: #ECF1FF;
		justify-content: center;
		margin: 0rpx 20rpx;
		padding: 10rpx 30rpx;
		border-radius: 50rpx;
		color: #4E6ECC;
		font-size: 30rpx;
		font-weight: bolder;
	}

	.header-item-image {
		width: 19.01rpx;
		height: 19rpx;
		margin-left: 8rpx;
	}

	.send-view-box {
		position: fixed;
		right: 0;
		bottom: 0;
		z-index: 20;
		border-radius: 50%;
		width: 130rpx;
		height: 130rpx;
		margin-bottom: 80rpx;
		margin-right: 30rpx;
	}

	.send-text-class {
		color: white;
		font-weight: bold;
		width: 100%;
		text-align: center;
	}

	.send-image-class {
		width: 40rpx;
		height: 40rpx;
		margin: 0rpx 20rpx;
	}

	.load-txt {
		padding: 0 0 20rpx 0;
		text-align: center;
		color: #999;
		font-size: 24rpx;
	}

	.load-txt-yincang {
		padding: 0 0 20rpx 0;
		text-align: center;
		color: white;
		font-size: 24rpx;
	}

	.load-icon {
		width: 300rpx;
		height: 300rpx;
		margin: 0 auto 20rpx auto;
		display: block;
	}

	.header-selected-view-class {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #0E59EA;
	}

	.secondhand-car-list-item-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.secondhand-car-list-item-image-right {
		width: 246rpx;
		height: 182rpx;
		margin: 0rpx 30rpx 0rpx 44rpx;
		border-radius: 20rpx;
		background: #F2F2F2;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;

	}
	.secondhand-car-list-item-image-right image{
		width: 100%;
	}
	.waterfall-item-title {
		flex: 1;
		text-align: left;
		margin-bottom: 8rpx;
		font-size: 28rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #000026;

		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.item-content-box {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.item-content-box-cars-label {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
	}

	.item-content-text {
		font-size: 22rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #AAAAAA;
	}

	.shu-line {
		width: 0rpx;
		height: 16rpx;
		border: 1px solid #E3E3E3;
		margin: 5rpx 10rpx;
	}

	.secondhand-car-list-item-right {
		flex: 1;
		margin-right: 42rpx;
	}

	.item-price-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 12rpx 0rpx 0rpx 0rpx;
	}

	.item-text-price {
		font-size: 34rpx;
		font-family: DIN Alternate;
		font-weight: bold;
		color: #EC4B4B;
	}

	.item-text-wan {
		font-size: 26rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #EC4B4B;
		margin-left: 10rpx;
	}

	.secondhand-car-list-item-fuel-save {
		padding: 8rpx 28rpx;
		background: #EDF1FF;
		border-radius: 8rpx;
		margin-right: 8rpx;
		font-size: 20rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #0E59EA;
		margin-top: 8rpx;
	}

	.secondhand-car-list-item-shoufu-price {
		font-size: 22rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		margin-left: 10rpx;
		color: #AAAAAA;
	}

	.secondhand-car-list-item-save-image {
		width: 35.9rpx;
		height: 34.45rpx;
	}

	.no-more-text-bottom-class {
		height: 180rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		opacity: 1;
		margin-top: 46rpx;
	}
</style>